<template>
	<view class="content">
		<view class="search-wrap uni-flex uni-row">
			<view class="flex-item input-wrap">
				<input class="uni-input" maxlength="50" v-model="keyword" confirm-type="search" @confirm="search()"
					placeholder="请输入您要搜索的商品" />
				<text class="iconfont iconsousuo1" @click.stop="search()"></text>
			</view>
		</view>
		<view class="u-p-30">
			<!--商品查询-->
			<view class="search-list u-m-t-40">
				<view v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
					<view class="goods-list-item u-flex u-m-b-30">
						<image :src="goodsImg(item.sku_image)" class="search-list-cover" :lazy-load="true"></image>
						<view class="goods-item-info u-m-l-20">
							<view class="goods-name u-font-36 u-line-2">{{ item.goods_name }}</view>
							<view class="goods-price">￥{{item.price}}</view>
							<view v-if="goodsList.length">
								<u-tag text="商品" mode="plain" shape="circle" size="mini" border-color="#262239"
									color="#262239"></u-tag>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore v-if="goodsList.length" height="80rpx" :status="loadStatus" icon-type="flower"
					color="#ccc" />
			</view>
			<!--笔记查询-->
			<view class="search-list">
				<view v-for="(item, index) in notesList" :key="index" @click="toNotes(item)">
					<view class="notes-list-item u-flex u-m-b-30">
						<image :src="$util.img(item.cover_img)" class="search-list-cover" :lazy-load="true"></image>
						<view class="notes-item-info u-m-l-20">
							<view class="notes-name u-font-36 u-line-2">{{item.note_title}}</view>
							<view class="u-m-t-25" v-if="notesList.length">
								<u-tag text="笔记" mode="plain" shape="circle" size="mini" border-color="#262239"
									color="#262239"></u-tag>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore v-if="notesList.length" height="80rpx" :status="loadStatus" icon-type="flower"
					color="#ccc" />
			</view>
		</view>

	</view>
</template>

<script>
	import uniTag from '@/components/uni-tag/uni-tag.vue';
	import list from '../public/js/list.js';
	import globalConfig from '@/common/js/golbalConfig.js';

	export default {
		components: {
			uniTag
		},
		data() {
			return {};
		},
		mixins: [globalConfig, list]
	};
</script>

<style lang="scss">
	.content {
		background: #FFFFFF;
		height: 100vh;
	}
    //搜索框
	.search-wrap {
		flex: 0.5;
		padding: 30rpx 30rpx 0;
		font-size: $font-size-tag;
		display: flex;
		align-items: center;

		.input-wrap {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: $color-bg;
			height: 70rpx;
			padding-left: 10rpx;
			border-radius: 70rpx;

			input {
				width: 90%;
				background: $color-bg;
				font-size: $font-size-tag;
				height: 50rpx;
				padding: 10rpx 25rpx 10rpx 40rpx;
				line-height: 50rpx;
				border-radius: 40rpx;
			}

			text {
				font-size: $font-size-toolbar;
				color: $color-tip;
				width: 80rpx;
				text-align: center;
				margin-right: 20rpx;
			}
		}

		.category-wrap,
		.list-style {
			display: flex;
			justify-content: center;
			align-items: center;

			.iconfont {
				font-size: 50rpx;
				color: $color-tip;
			}

			text {
				display: block;
				margin-top: 60rpx;
			}
		}
	}

	.search-list {
		background-color: #FFFFFF;
	}

	.search-list-cover {
		width: 140rpx;
		height: 140rpx;
		border-radius: 5px;
	}

	.goods-price {
		color: #fa3534;
	}
</style>
